<template>
  <div class="question-wrapper" :class="[classType[qType], { 'question-border': is_border }]">
    <div class="question-header">
      <div class="stem">
        <template v-if="question.topic_level == 1">
          <div class="index">{{ ` ${qIndex}、` }}</div>
        </template>
        <template v-else>
          <div class="index" v-if="$util.inArray(qType, [6, 7])">{{ ` ${qIndex}、` }}</div>
          <div class="index" v-else>{{ `(${qIndex})、` }}</div>
        </template>
        <div class="subject">
          <div class="type-text">{{ question.question_type_text }}</div>
          <div class="score" v-if="qScore">{{ `(${qScore}分)` }}</div>
          <div class="title" v-html="question.title"></div>
        </div>
      </div>
      <template v-if="!$util.isEmpty(question.material)">
        <div class="question-player">
          <div
            class="item"
            :class="material.type"
            v-for="(material, index) in question.material"
            :key="index"
          >
            <BaseAudio
              :fileurl="material.src"
              :index="index"
              :topicIndex="qIndex"
              :uniIndex="`play_${question.id}_${index}`"
              v-if="material.type === 'audio'"
            ></BaseAudio>
            <BaseVideo
              v-if="material.type === 'video'"
              :fileurl="material.src"
              :topicIndex="qIndex"
              :uniIndex="`play_${question.id}_${index}`"
            ></BaseVideo>
          </div>
        </div>
      </template>
    </div>
    <!-- 单选/判断 -->
    <div class="question-body" v-if="$util.inArray(qType, [1, 2])">
      <el-radio-group v-model="options" disabled>
        <el-radio :label="item.id" v-for="item in question.options" :key="item.id">
          <span class="key">{{ `${item.key}.` }}</span>
          <div v-html="item.value" class="content"></div>
        </el-radio>
      </el-radio-group>
    </div>
    <!-- 多选 -->
    <div class="question-body" v-else-if="$util.inArray(qType, [3, 4])">
      <el-checkbox-group v-model="options" disabled>
        <el-checkbox :label="item.id" v-for="item in question.options" :key="item.id">
          <span class="key">{{ `${item.key}.` }}</span>
          <div v-html="item.value" class="content"></div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <!-- 填空 -->
    <el-row type="flex" :gutter="50" class="question-body" v-else-if="qType == 5">
      <el-col :span="12" v-for="item in question.options" :key="item">
        <div class="filling-item">
          <span class="filling-index">{{ `(${item.number})` }}</span>
          <el-input
            v-model="options[item.number - 1]"
            size="small"
            @input="handleChange(question)"
            class="filling-input"
            disabled
          ></el-input>
        </div>
      </el-col>
    </el-row>
    <!-- 材料 -->
    <div class="question-body" v-else-if="qType == 6">
      <Question
        v-for="(topic, que_index) in question.topics"
        :key="topic.id"
        :question="topic"
        :qIndex="que_index + 1"
        :qType="topic.question_type"
        :qScore="topic.score"
        :options="setOptionsAnswer(topic)"
        :answer="setCorrectAnswer(topic)"
        :is_border="question.topics.length - 1 != que_index"
        :answerStatus="answerStatus"
        :level="2"
        @change="changeNumber($event, topic.id, 2)"
      ></Question>
    </div>
    <!-- 完形填空 -->
    <div class="question-body" v-else-if="qType == 7">
      <div class="protype-item" v-for="(topic, index) in question.topics" :key="index">
        <span class="protype-index">{{ `${index + 1}.` }}</span>
        <el-radio-group v-model="options[index]" disabled>
          <el-radio :label="item.id" v-for="item in topic.options" :key="item.id">
            <span class="key">{{ `${item.key}.` }}</span>
            <div v-html="item.value" class="content"></div>
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <!-- 解答 -->
    <div class="question-body" v-else-if="qType == 8">
      <el-input
        type="textarea"
        v-model="options"
        :autosize="{ minRows: 2, maxRows: 6 }"
        disabled
      ></el-input>
    </div>

    <!-- 解析 -->
    <Parsing
      :parsing_data="{
        question_type: question.question_type,
        points: question.points,
        answer: answer,
        analyze: question.analyze
      }"
      v-if="question.question_type !== 6"
    ></Parsing>
    <!-- 分数 -->
    <template v-if="question.subjective === 1 && question.question_type !== 6">
      <div class="user-score" v-if="answerStatus === 2">
        {{ `得分：${question.user_score}分` }}
      </div>
      <div class="review-score" v-else>
        <span class="label">打分</span>
        <el-input-number
          v-model="value"
          :min="0"
          :max="qScore"
          size="mini"
          @change="changeNumber($event, question.id, 1)"
        ></el-input-number>
      </div>
    </template>
    <template v-else>
      <div class="user-score" v-if="question.question_type !== 6">
        {{ `得分：${question.user_score}分` }}
      </div>
    </template>
  </div>
</template>

<script>
import Parsing from './parsing'
import BaseAudio from '@/views/exam/components/baseAudio'
import BaseVideo from '@/views/exam/components/baseVideo'
export default {
  name: 'Question',
  components: {
    Parsing,
    BaseAudio,
    BaseVideo
  },
  props: {
    // 试题数据
    question: {
      type: Object,
      default: function() {
        return {}
      }
    },
    // 试题的题号
    qIndex: {
      type: Number,
      default: 0
    },
    // 试题的类型
    qType: {
      type: Number,
      default: 0
    },
    // 试题的分数
    qScore: {
      type: Number,
      default: 0
    },
    // 正确答案
    answer: {
      type: Array
    },
    // 选择的答案
    options: {
      type: [Array, String]
    },
    // 1是大题 2是小题
    level: {
      type: Number,
      default: 0
    },
    // 是否显示试题的下边框
    is_border: {
      type: Boolean,
      default: false
    },
    answerStatus: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      classType: {
        1: 'question-radio',
        2: 'question-radio',
        3: 'question-select',
        4: 'question-select',
        5: 'question-filling',
        6: 'question-material',
        7: 'question-protype',
        8: 'question-answer'
      },
      value: 0
    }
  },
  methods: {
    // 设置选项的答案
    setOptionsAnswer(item) {
      const _this = this
      let answer
      // 1，2单选题/判断题
      if (_this.$util.inArray(item.question_type, [1, 2])) {
        // 判断答案是否为空，空就返回空字符串
        if (_this.$util.isEmpty(item.answer_data)) answer = ''
        // 答案数组转成字符串，id转成数字
        else answer = parseInt(item.answer_data.toString())
        // 3，4多选题/不定项
      } else if (_this.$util.inArray(item.question_type, [3, 4])) {
        // 判断答案是否为空，空就返回空数组
        if (_this.$util.isEmpty(item.answer_data)) return []
        // 数组的每一项id转成数字
        answer = item.answer_data.map(Number)
        // 5填空题
      } else if (item.question_type == 5) {
        // 判断答案是否为空
        if (_this.$util.isEmpty(item.answer_data)) {
          answer = []
          // 给填空的每一项添加空字符串
          item.options.forEach(() => {
            answer.push('')
          })
        } else {
          answer = item.answer_data
        }
      } else if (item.question_type == 7) {
        answer = []
        item.topics.forEach(topic => {
          if (_this.$util.isEmpty(topic.answer_data)) {
            answer.push('')
          } else {
            answer.push(parseInt(topic.answer_data.toString()))
          }
        })
      } else if (item.question_type == 8) {
        if (_this.$util.isEmpty(item.answer_data)) {
          answer = ''
        } else {
          answer = item.answer_data.toString()
        }
      }
      return answer
    },
    // 设置当前正确的答案
    setCorrectAnswer(item) {
      let answer
      if (this.$util.inArray(item.question_type, [1, 2, 3, 4])) {
        let topic = item.options.filter(item => item.is_right == 1)
        answer = topic.map(item => item.key)
      } else if (item.question_type == 5) {
        answer = item.options.map(item => item.values)
      } else if (item.question_type == 7) {
        // 完型填空合拼正确的试题数组
        let topic = item.topics.reduce(
          (pre, cur) => pre.concat(cur.options.filter(item => item.is_right == 1)),
          []
        )
        answer = topic.map(item => item.key)
      } else if (item.question_type == 8) {
        answer = [item.reference_answer]
      }
      return answer
    },
    // 打分
    changeNumber(val, id, level) {
      if (level == 1) {
        this.$emit('change', { value: val, topic_id: id })
      } else {
        this.$emit('change', val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.question-wrapper {
  padding: 15px 0;
  position: relative;
  &.question-border {
    border-bottom: 1px solid $border-color-divider;
  }
  .question-header {
    .stem {
      display: flex;
      align-items: flex-start;
      font-size: 14px;
      font-weight: 500;
      color: $text-color-import;
      line-height: 20px;
      .subject {
        flex: 1;
        @include clearfix();
        .type-text {
          float: left;
          font-size: 12px;
          color: #ffffff;
          padding: 2px 5px;
          border-radius: 2px;
          line-height: 1;
          margin-top: 2px;
          @include edu-color-primary(background-color);
        }
        .score {
          float: left;
          margin: 0 5px;
        }
        .title {
          ::v-deep * {
            padding: 0;
            margin: 0;
          }
        }
      }
    }
    .question-player {
      display: flex;
      flex-wrap: wrap;
      .item {
        &.video {
          width: calc(50% - 10px);
          margin-top: 15px;
        }
        &.video:nth-child(odd) {
          margin-right: 20px;
        }
        &.audio {
          width: 100%;
          margin-top: 15px;
        }
      }
    }
  }
  .user-score {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    color: $text-color-error;
    &.p-left {
      margin-left: 20px;
    }
  }
  .review-score {
    margin-top: 12px;
    .label {
      margin-right: 9px;
      font-size: 13px;
      font-weight: 400;
      color: $text-color-import;
    }
  }
}
// 单选
.question-radio {
  .question-body {
    margin-top: 3px;
    .el-radio-group {
      display: flex;
      flex-direction: column;
    }
    .el-radio {
      display: flex;
      align-items: flex-start;
      margin-right: 0;
      white-space: normal;
      margin-top: 12px;
      color: $text-color-import;
      ::v-deep .el-radio__input.is-checked + .el-radio__label {
        color: $text-color-import;
      }
      ::v-deep .el-radio__label {
        display: flex;
        align-items: flex-start;
        @include clearfix();
      }
      .key {
        float: left;
      }
      .content ::v-deep * {
        margin: 0;
        padding: 0;
      }
      .content ::v-deep img {
        max-width: 100%;
      }
      ::v-deep .el-radio__input.is-disabled + span.el-radio__label {
        color: $text-color-import;
      }
      ::v-deep .el-radio__input.is-disabled .el-radio__inner {
        border-color: #dcdfe6;
        background-color: #ffffff;
      }
      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
        @include edu-color-primary(background-color);
        @include edu-color-primary(border-color);
      }
      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
        background-color: #ffffff;
      }
    }
  }
}
// 多选
.question-select {
  .question-body {
    margin-top: 3px;
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }
    ::v-deep .el-checkbox__input {
      margin-top: 3px;
    }
    .el-checkbox {
      display: flex;
      align-items: flex-start;
      margin-right: 0;
      white-space: normal;
      margin-top: 12px;
      color: $text-color-import;
      ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
        color: $text-color-import;
      }
      ::v-deep .el-checkbox__label {
        display: flex;
        align-items: flex-start;
        @include clearfix();
      }
      .key {
        float: left;
      }
      .content ::v-deep * {
        margin: 0;
        padding: 0;
      }
      .content {
        ::v-deep img {
          max-width: 100%;
        }
      }
      ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
        background-color: #ffffff;
        border-color: #dcdfe6;
      }
      ::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
        color: $text-color-import;
      }
      ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
      ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        @include edu-color-primary(background-color);
        @include edu-color-primary(border-color);
      }
      ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner::after {
        border-color: #ffffff;
      }
    }
  }
}
// 填空
.question-filling {
  .question-body {
    margin-top: 5px;
    flex-wrap: wrap;
    .filling-item {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .filling-index {
        font-size: 12px;
        font-weight: 400;
        color: $text-color-import;
        margin-right: 5px;
      }
      .filling-input {
        font-size: 12px;
        font-weight: 400;
        ::v-deep .el-input__inner {
          border-radius: 0;
          border: none;
          color: $text-color-import;
          border-bottom: 1px solid #606266;
          padding: 0;
        }
      }
      ::v-deep .el-input.is-disabled .el-input__inner {
        background-color: #ffffff;
        color: $text-color-secondary;
      }
    }
  }
}
// 解答
.question-answer {
  .question-body {
    margin-top: 15px;
    ::v-deep .el-textarea__inner {
      border-radius: 0;
      border: 1px solid #606266;
    }
    ::v-deep .el-textarea.is-disabled .el-textarea__inner {
      background-color: #ffffff;
      color: $text-color-secondary;
    }
  }
}
// 完型填空
.question-protype {
  & > .question-body {
    padding-left: 20px;
  }
  .question-body {
    margin-top: 5px;
    .protype-item {
      display: flex;
      align-items: flex-start;
      .protype-index {
        font-size: 12px;
        font-weight: 400;
        color: #303133;
        margin-right: 5px;
        margin-top: 11px;
      }
      .el-radio-group {
        display: flex;
        flex-wrap: wrap;
      }
      .el-radio {
        display: flex;
        margin-top: 10px;
        color: $text-color-import;
        ::v-deep .el-radio__input.is-checked + .el-radio__label {
          color: $text-color-import;
        }
        ::v-deep .el-radio__label {
          font-size: 12px;
          display: flex;
          align-items: flex-start;
          @include clearfix();
        }
        .key {
          float: left;
        }
        .content ::v-deep * {
          margin: 0;
          padding: 0;
        }
        .content {
          ::v-deep img {
            max-width: 100%;
          }
        }
        ::v-deep .el-radio__input.is-disabled + span.el-radio__label {
          color: $text-color-import;
        }
        ::v-deep .el-radio__input.is-disabled .el-radio__inner {
          border-color: #dcdfe6;
          background-color: #ffffff;
        }
        ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
          @include edu-color-primary(background-color);
          @include edu-color-primary(border-color);
        }
        ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
          background-color: #ffffff;
        }
      }
    }
  }
}
// 材料
.question-material {
  & > .question-body {
    padding-left: 20px;
  }
  .question-radio,
  .question-select,
  .question-filling,
  .question-answer,
  .question-protype {
    .question-header .stem {
      display: block;
    }
    .question-header .stem .index {
      float: left;
    }
  }
  .points {
    margin-left: 20px;
    margin-top: 23px;
    font-size: 14px;
    font-weight: 400;
    color: #606266;
  }
}
</style>
